<template>
    <div class="tinymce-editor">
      <div class="title"><input type="text" v-model="title" @blur="getTitle" placeholder="• 请输入文章标题 (5 ~ 10个字)"/></div>
        <Editor
            v-model="articleValue"
            :init="init"
        ></Editor>
    </div>
</template>

<script>
  import tinymce from "tinymce/tinymce";
  import Editor from "@tinymce/tinymce-vue";
  import "tinymce/skins/ui/oxide/skin.css";
  import "../../public/tinymce/langs/zh_CN";
  import "tinymce/themes/silver/theme";
  import "tinymce/plugins/image";
  import 'tinymce/plugins/media'
  import 'tinymce/plugins/table'
  import "tinymce/plugins/lists";
  import "tinymce/plugins/link";
  import "tinymce/plugins/contextmenu";
  import "tinymce/plugins/wordcount";
  import "tinymce/plugins/colorpicker";
  import "tinymce/plugins/textcolor";
  import "tinymce/plugins/code";
  import "tinymce/plugins/codesample";
  import "tinymce/plugins/paste";
  import "tinymce/plugins/hr";
  import "tinymce/plugins/preview";
  import "tinymce/plugins/advlist";
  import "tinymce/plugins/save";
  import "tinymce/plugins/imagetools";
  export default {
    components: {
      Editor
    },
    props:{
      value: {
        type: String,
        default: ""
      },
      plugins: {
        type: [String, Array],
        default:
          // ' anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists  noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
          "code codesample lists advlist link image media table  wordcount paste preview hr save imagetools",
      },
      toolbar: {
        type: [String, Array],
        default:
        'undo redo | bold  italic | underline | strikethrough | alignleft  aligncenter alignright | outdent indent | hr blockquote  removeformat subscript superscript code codesample | bullist numlist link image preview table|forecolor fontsizeselect backcolor save'
        // "undo redo |  formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat hr",
      },
    },
    data() {
      return {
        //初始化配置
        init:{
          language_url: "../../public/tinymce/langs/zh_CN", // 这里需要单独处理
          language: "zh_CN",
          skin_url: '../../public/tinymce/skins/ui/oxide',
          height: 800,
          plugins: this.plugins,
          toolbar: this.toolbar,
          branding: false,
          menubar: false,
          placeholder:'在此输入文字',
          images_upload_handler: (blobInfo, success, failure) => {
            let blob = blobInfo.blob();
            let url = URL.createObjectURL(blob)
            success(url)
          },
        },
        title:''
      }
    },
    computed: {
      articleValue: {
        get(){
          return this.$store.state.articleValue
        },
        set(value){
          this.$store.commit('changeArticleValue', value)
        }
      }
    },
    methods:{
      getTitle(){
        this.$emit('getTitle', this.title)
      }
    },
    mounted () {
      tinymce.init({})
    },
  }
</script>

<style lang="less" scoped>
.tinymce-editor{
  width: 80%;
  margin: 0 auto;
  border: 1px solid #d4d4d4;
  .title{
    box-sizing: border-box;
    padding: 5px 20px;
    height: 80px;
    width: 100%;
    background-color: white;
    line-height: 80px;
    input{
      border: 0;
      width: 100%;
      height: 80px;
      font-weight: bold;
      color: #606266;
      font-size: 22px;
      outline: none;
      text-align: center;
    }
  }
  /deep/.tox-sidebar-wrap{
    padding: 5px 20px;
    background-color: white;
  }
}
</style>
